
<style >
.hovered-row{
  background-color:"#4cba10";
}

.el-table__column-filter-dropdown {
    background-color: transparent !important; /* 设置背景颜色为透明 */
}


.el-scrollbar_view{
  display: 0 !important;
  margin-left: -130px;
/* vertical-align: left; */
}
  /* .el-table_header-wrapper{
    width:800px;
  }

  .el-table_body-wrapper{
    width:800px;
  } */
  
.el-scrollbar_wrap {
  /* display: inline-block; 
  vertical-align: middle; */
  padding: 0 !important; /* 可以尝试去掉padding */
    margin: 0 !important; /* 可以尝试去掉margin */
    border: none !important; /* 可以尝试去掉border */
}
  .el-table thead th {
    font-weight: 300;
}


.el-table .warning-row {
    background: #FFEAD8;
  }

  .el-table .success-row {
    background: #FFD4A1;
  }
  

  /* 修改筛选器下拉菜单的样式 */
.el-table-filter__content {
    background-color: #FFEAD8;
    border: 1px solid #FFEAD8;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    font-size: 14px;
}

/* 修改筛选器选项的样式
.el-checkbox, .el-radio {
  background-color: #FFEAD8;
    border: 1px solid #FFEAD8;
    margin: 8px 0;
    font-size: 14px;
} */

.el-checkbox__label, .el-radio__label {
    padding-left: 10px;
}

/* 修改勾选框的颜色 */
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-checked .el-checkbox__inner::after {
    background-color: #21a621;
    border-color: #21a621;
    color:#21a621;
}


/* 按钮样式 */
.click_btn{
    color: #ffcc88; /* 文字颜色为白色 */
    border: none; /* 移除边框 */
    width: 65px;
    height: 16px;
    border-radius: 5px; /* 设置圆角 */
    padding: 10px 20px; /* 设置内边距 */
    font-size: 13px; /* 字体大小 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
    transition: background-color 0.3s ease; /* 添加过渡效果 */

}

/* 按钮悬停样式 */
.click_btn:hover{
  background-color: #ffcc88; 
}

/* .el-radio__input.is-checked .el-radio__inner,
.el-radio__input.is-checked .el-radio__inner::after {
    background-color: #21a621;
    border-color: #21a621;
    color:#21a621;
}

.el-table-filters__checkbox.is-checked .el-checkbox__inner,
.el-table-filters__checkbox.is-checked .el-checkbox__inner::after {
    background-color: #52c41a;
    border-color: #52c41a;
}

.el-table-filters__checkbox.is-checked .el-checkbox__label {
    color: #52c41a;
} */
</style>



<template>
<el-table
    ref="multipleTable"
    :data="actInfo"
    tooltip-effect="dark"
    style="margin-top:-50px;margin-left:50px;width: 100%;width:1300px;padding: 80px;background-color: transparent;"
    
     :row-class-name="tableRowClassName"
    @selection-change="handleSelectionChange"
    v-loading="loading"
    :header-cell-style="{ background: '#ffcc88', color: '#fef3dd', fontSize: '14px' }"
    >

    <!-- 多选列 -->
    <el-table-column
      type="selection"
      width="50">
 
    </el-table-column>

    <!-- 活动名称 -->
    <el-table-column
      prop="ATitle"
      label="活动名称"
      width="100">
    </el-table-column>

    <!-- 活动校区 -->
    <el-table-column
      prop="Campus"
      label="活动校区"
      width="100"
      :filters="[{text: '南校区', value: '南校区'}, {text: '北校区', value: '北校区'},{text: '珠海校区', value: '珠海校区'}, {text: '深圳校区', value: '深圳校区'}, {text: '东校区', value: '东校区'}]" 
      :filter-method="CampusFilterHandler">
      <template #default="{ row }">
        {{ getCampusText(row.Campus) }}
      </template>
    </el-table-column>

    <!-- 活动地点 -->
    <el-table-column
      prop="Place"
      label="活动地点"
      width="120">
    </el-table-column>

    <!-- 活动类型 -->
    <el-table-column
      prop="Type"
      label="活动类型"
      width="120"
      :filters="[{text: '思想政治类', value: '思想政治类'}, {text: '学术科技类', value: '学术科技类'},{text: '体育竞技类', value: '体育竞技类'}, {text: '志愿公益类', value: '志愿公益类'}, {text: '文化艺术类', value: '文化艺术类'}]" 
      :filter-method="TypeFilterHandler">
      <template #default="{ row }">
        {{ getTypeText(row.Type) }}
      </template>
    </el-table-column>

    <!-- 活动报名时间 -->
    <el-table-column
      label="活动报名时间"
      width="200">
      <template #default="{ row }">
        {{ formatRegistrationTime(row.StartTime, row.EndTime) }}
      </template>
    </el-table-column>

    <!-- 活动开展时间 -->
    <el-table-column
      label="活动开展时间"
      width="200">
      <template #default="{ row }">
        {{ formatRegistrationTime(row.Stime, row.Etime) }}
      </template>
    </el-table-column>

    <!-- 活动状态 -->
    <el-table-column
      prop="State"
      label="活动状态"
      width="120"
      :filters="[{text: '审批中', value: '审批中'}, {text: '待报名', value: '待报名'}, {text: '报名中', value: '报名中'}, {text: '待开展', value: '待开展'}, {text: '开展中', value: '开展中'}, {text: '已结束', value: '已结束'}]" 
      :filter-method="StateFilterHandler">
      <template #default="{ row }">
        {{ getStateText(row.State) }}
      </template>
    </el-table-column>
                                 

    <!-- 操作列 -->
    <el-table-column
      label="操作"
      width="180">
      <template v-slot:default="scope">  
        <el-button :type="text" size="middle" @click="showMemberDialog(scope.row)">成员名单</el-button>
      </template>
    </el-table-column>

</el-table>


  <el-dialog v-model="MemberVisible" width=1100px :modal="false" :before-close="handleClose" style=" height:650px; border: 1px solid gray ">
                                <P style="margin-top: -20px;font-size: 15px;">{{this.currentActName}}成员信息</P>
                                <div style="height: 470px;">
                                    <el-table :data="MemberTable"  ref="multipleTable"  stripe :border="true" max-height="470" style="width: 100%;"  @selection-change="handleSelectionChange">
                                        <el-table-column type="selection" width="55"></el-table-column>
                                        <el-table-column prop="学工号" label="学工号" width="100" > </el-table-column>
                                        <el-table-column prop="姓名" label="姓名" width="120"> </el-table-column>
                                        <el-table-column prop="性别" label="性别" width="90" :filters="[{text: '男', value: '男'}, {text: '女', value: '女'}]" :filter-method="filterHandler"> </el-table-column>
                                        <el-table-column prop="校区" label="校区" width="100" 
                                        :filters="[{text: '南校园', value: '南校园'}, {text: '北校园', value: '北校园'},{text: '珠海校区', value: '珠海校区'}, {text: '深圳校区', value: '深圳校区'}, {text: '东校园', value: '东校园'}]" 
                                        :filter-method="CampusFilterHandler"></el-table-column>
                                        <el-table-column prop="年级" label="年级" width="100" :filters="[{text: '大一', value: '大一'}, {text: '大二', value: '大二'},{text: '大三', value: '大三'},{text: '大四', value: '大四'},
                                        {text: '研一', value: '研一'},{text: '研二', value: '研二'},{text: '研三', value: '研三'},{text: '硕士', value: '硕士'},{text: '博士', value: '博士'}]" :filter-method="filterHandler">  </el-table-column>
                                        <el-table-column prop="学院" label="学院" width="150"> </el-table-column>
                                        <el-table-column prop="政治面貌" label="政治面貌" width="100" :filters="[{text: '群众', value: '群众'}, {text: '共青团员', value: '共青团员'},{text: '党员', value: '党员'},{text: '其它', value: '其它'}]" :filter-method="filterHandler"> </el-table-column>
                                        <el-table-column prop="邮箱" label="邮箱" width="200"> </el-table-column>
                                        <el-table-column prop="电话" label="电话" width="130"> </el-table-column>
                                        <el-table-column prop="职位" label="职位" width="100"> </el-table-column>
                                    </el-table>
                                </div>
                                <div style="margin-top:30px; margin-left: 700px; display: flex; justify-content: center;">
                                    <el-button @click="this.MemberVisible = false">取消</el-button>
                                    <el-dropdown style="margin-left: 40px" placement="top">
                                        <el-button type="primary"> 一键导出<i class="el-icon-arrow-down"></i>  </el-button>
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                               <el-dropdown-item @click="exportform('csv')">CSV格式</el-dropdown-item>
                                                <el-dropdown-item @click="exportform('excel')">Excel格式</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </div>
                            </el-dialog>
</template>

<script>
import axios from 'axios'
// import * as XLSX from 'xlsx';
  export default {
    data() {
      return {

        
        hoveredRowIndex: -1, // 初始化为 -1，表示没有行被鼠标指向
        actInfo:[],
        MemberTable:[],
        
        // ActTable:this.actInfo.map(activity => ({
        //     activityName: activity.ATitle,
        //     campus: activity.Campus,
        //     AssignTime:activity.StartTime+activity.EndTime,
        //     Address:activity.Place,
        //     type:activity.Type,
        //     permission:activity.Permission,
        //     ActTime:activity.Stime+activity.Etime,
        //     Requirement:activity.Requirement,
        //     content:activity.Content,
        //     permitState:activity.State
        // })),
        ActTableData: [],
        multipleSelection: [],
        MemberVisible:false,
        memberInfo:[],
        // Aid:{},
      }
    },

    methods: {

      // eslint-disable-next-line no-unused-vars
      tableRowClassName({row, rowIndex}) {
        
        if (rowIndex % 2 === 0) {
          return 'warning-row';
        } else if (rowIndex % 2 !== 0) {
          return 'success-row';
        }
        return '';
      },

      //行的样式
      // eslint-disable-next-line no-unused-vars

      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      getTypeText(type) {
            switch (type) {
                case 1:
                    return '思想政治类';
                case 2:
                    return '学术科技类';
                case 3:
                    return '体育竞技类';
                case 4:
                    return '志愿公益类';
                case 5:
                    return '文化艺术类';
                default:
                    return '';
            }
        },

        getCampusText(address) {  
            switch (address) {
                case 1:
                    return '南校区';
                case 2:
                    return '北校区';
                case 3:
                    return '珠海校区';
                case 4:
                    return '深圳校区';
                case 5:
                    return '东校区';
                case 6:
                    return '五校园'
                default:
                    return '';     
            }
        },
        getStateText(state){  
            switch (state) {
                case 0:
                    return '审批中';
                case 1:
                    return '待报名';
                case 2:
                    return '报名中';
                case 3:
                    return '待开展';
                case 4:
                    return '开展中';
                case 5:
                    return '已结束';
                default:
                    return '审批中';     
            }
        },

        CampusFilterHandler(value, row, column) {
            const property = column['property'];
            return this.getCampusText(row[property]) === value;
        },
        TypeFilterHandler(value, row, column) {
            const property = column['property'];
            return this.getTypeText(row[property]) === value;
        },
        StateFilterHandler(value, row, column) {
            const property = column['property'];
            return this.getStateText(row[property]) === value;
        },
        formatRegistrationTime(startTime,endTime){
          return `${this.getFormatTime(startTime)} 至 ${this.getFormatTime(endTime)}`;
        },
        getFormatTime(time) {
            let date = new Date(time); 
            let year = date.getFullYear();
            let month = (date.getMonth() + 1).toString().padStart(2, '0'); 
            let day = date.getDate().toString().padStart(2, '0');

            return `${year}-${month}-${day}`;
        },

        showMemberDialog(input) {
            console.log(input.Aid)
            this.MemberVisible = true;
            this.currentActName = input.ATitle;
             // 查找在this.activity中与row.Aid相匹配的索引
            const foundIndex = this.actInfo.findIndex(item => item.Aid === input.Aid);

        if (foundIndex !== -1) {
            // 如果找到了对应的索引，则可以继续处理
            console.log("Found index in activity:", foundIndex);
            // 这里可以根据需要进行其他操作，例如显示对话框等
            this.MemberInfo = this.memberInfo[foundIndex] //this.MemberTable里面的都是当前选中的活动的成员信息
            this.MemberTable = this.MemberInfo.map((member) => {
              console.log(this.MemberTable)
                let genderString = member.User.Gender === 0 ? '男' : '女';
                let statusString = member.Status === 0 ? '成员' : '负责人';
                return {
                    学工号:member.User.UID,
                    姓名: member.User.Uname,
                    性别: genderString,
                    校区: member.User.Campus,
                    年级: member.User.Grade,
                    学院: member.User.Major,
                    政治面貌: member.User.PoliticsStatus,
                    邮箱: member.User.Email,
                    电话: member.User.Phone,  
                    职位: statusString, 

                };
            })
            console.log( this.MemberInfo)
        } else {
            console.log("Aid not found in activity array");
            // 如果找不到对应的索引，可能需要处理一些错误情况或者给出提示
        }

            // // this.currentClub = club;
            // this.Aid = aid;

            // this.MemberTable = this.memberInfo[index].map((member,idx) => {
            //     let genderString = member.Gender === 0 ? '男' : '女';
            //     return {
            //         学工号:member.UID,
            //         姓名: member.Uname,
            //         性别: genderString,
            //         校区: member.Campus,
            //         年级: member.Grade,
            //         学院: member.Major,
            //         政治面貌: member.PoliticsStatus,
            //         邮箱: member.Email,
            //         电话: member.Phone,   
            //         职位:this.position[index][idx]
            //     };
            // })
        }, 

        filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        },
        // exportform(format) {
        //     const exportData = this.multipleSelection && this.multipleSelection.length > 0 ? this.multipleSelection : this.tableData;

        //     if (format === 'csv') {
        //         const csvContent = this.convertToCSV(exportData);
        //         const filename = '社团成员信息.csv';
        //         const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });

        //         if (navigator.msSaveBlob) {
        //             navigator.msSaveBlob(blob, filename);
        //         } else {
        //             const link = document.createElement('a');
        //             if (link.download !== undefined) {
        //                 const url = URL.createObjectURL(blob);
        //                 link.setAttribute('href', url);
        //                 link.setAttribute('download', filename);
        //                 link.style.visibility = 'hidden';
        //                 document.body.appendChild(link);
        //                 link.click();
        //                 document.body.removeChild(link);
        //             }
        //         }
        //     } else if (format === 'excel') {
        //         const wb = XLSX.utils.book_new();
        //         const ws = XLSX.utils.json_to_sheet(exportData);
        //         XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
        //         const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
        //         const filename = 'Excel导出功能模板.xlsx';
        //         const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });

        //         if (navigator.msSaveBlob) {
        //             navigator.msSaveBlob(blob, filename);
        //         } else {
        //             const link = document.createElement('a');
        //             if (link.download !== undefined) {
        //                 const url = URL.createObjectURL(blob);
        //                 link.setAttribute('href', url);
        //                 link.setAttribute('download', filename);
        //                 link.style.visibility = 'hidden';
        //                 document.body.appendChild(link);
        //                 link.click();
        //                 document.body.removeChild(link);
        //             }

        //         }
        //     }
        // },

        convertToCSV(data) {
            // 将数据转换为 CSV 格式
            const csvRows = [];
            const headers = Object.keys(data[0]);
            csvRows.push(headers.join(','));

            for (const row of data) {
                const values = headers.map(header => {
                    let escaped = ('' + row[header]).replace(/"/g, '\\"');
                    return `"${escaped}"`;
                });
                csvRows.push(values.join(','));
            }

            return csvRows.join('\n');
        },
    },
    mounted() {
        const params = new URLSearchParams();
        params.append('uid', this.$store.state.userinfo.account);

        axios.get('http://localhost:8080/api/manager/getActInfo', { params })
        .then(response => {
            this.actInfo = response.data.data.activity;
            this.memberInfo = response.data.data.members;
            // this.member = response.data.data.members;
            console.log(this.memberInfo)
        })
        .catch(error => {
            console.error('Error fetching ActManageInfo:', error);
        });
        
    }

  }
</script>

